﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">

<head>
<jsp:include page="/common.jsp"></jsp:include>
</head>

<body class="navbar-top">
	<div class="modal-shiftfix">
		<jsp:include page="/menu.jsp"></jsp:include>
		<div class="container-fluid main-content">
			<div class="widget-container fluid-height clearfix">
				<div class="heading clearfix">
					<i class="icon-table"></i> 职位设置 <a
						class="btn btn-sm btn-primary pull-right weiBoxs-dialog"
						href="EmmPositionServlet?method=addPosition" dialog-title="添加职位"><i
						class="icon-plus"></i> 添加职位</a>
				</div>
				<div class="widget-content padded clearfix">
					<div class="dataTables_filter">
						<form id="positionForm" class="form-inline"
							action="EmmPositionServlet?method=getAllEmmPosition"
							method="post">
							<div class="btn-group">
								<span>职位名：</span> <input type="text" class="form-control"
									id="positionname" name="positionname" value="${param.positionname}">
							</div>
							<div class="btn-group">
								<button type="button" id="searchButton" class="btn btn-success">
									<i class="glyphicon glyphicon-search"></i> 搜索
								</button>
							</div>
						</form>
					</div>
					<div id="w0" class="grid-view">
						<div class="table-responsive">
							<table class="table table-hover">
								<thead>
									<tr>
										<th nowrap>ID</th>
										<th nowrap>等级</th>
										<th nowrap>名称</th>
										<th nowrap>创建时间</th>
										<th nowrap>更新时间</th>
										<th class="action-column">操作</th>
									</tr>
								</thead>
								<tbody>
								<c:forEach items="${positionList}" var="position">
									<tr>
										<td>${position.positionId}</td>
										<td>${position.positionLevel}</td>
										<td>${position.positionName}</td>
										<td>
											<fmt:formatDate value="${position.createTime}" pattern="yyyy-MM-dd"/>
										</td>
										<td>
											<fmt:formatDate value="${position.updateTime}" pattern="yyyy-MM-dd"/>
										</td>
										<td>
											<div class="col-lg-20">
												<button type="button" id="updatebtn" name="updatebtn"
													class="btn btn-warning btn-sm" onclick="updateposition('${position.positionId}')">修改
												</button>
												<button type="button" id="delbtn" name="delbtn"
													class="btn btn-danger btn-sm" onclick="deleteposition('${position.positionId}')">删除
												</button>
												<button type="button" id="linkbtn" name="linkbtn"
													class="btn btn-success btn-sm" onclick="showselectmodel('${position.positionId}')">关联菜单</button>
											</div>
										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</div>
						<div id="checkedAllMenu" style="height:10px;display:none"></div>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- 这边是选择菜单的模态框  begin -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<input type="hidden" id="referencepositionId"
						name="referencepositionId">
					<h4 class="modal-title" id="myModalLabel">选择关联菜单</h4>
				</div>
				<div class="modal-body">
					<table id="example" class="table">
						<thead>
							<tr>
								<th></th>
								<th>名称</th>
								<th>地址</th>
								<th>上级菜单</th>
							</tr>
						</thead>
						<tbody>
						   <c:forEach items="${parentMenuList}" var="parentMenu">
							   <tr>
								   <td><input type="checkbox" name="checkedemployee"
											  id="checkedbox${parentMenu.menuId}" value="${parentMenu.menuId}" onclick="movetochecked('${parentMenu.menuId}')"
											  style="opacity: 1;" /></td>
								   <td>${parentMenu.menuName}</td>
								   <td>${parentMenu.menuUrl}</td>
								   <td></td>
							   </tr>
							   <c:forEach items="${parentMenu.childrenMenuList}" var="sonMenu">
								   <tr>
									   <td>
										   <input type="checkbox" name="checkedemployee"
												  id="checkedbox${sonMenu.menuId}" value="${sonMenu.menuId}" onclick="movetochecked('${parentMenu.menuId}')"
												  style="opacity: 1;" />
									   </td>
									   <td>${sonMenu.menuName}</td>
									   <td>${sonMenu.menuUrl}</td>
									   <td>${sonMenu.parentMenu.menuName}</td>
								   </tr>
							   </c:forEach>
						   </c:forEach>
						</tbody>
					</table>
				</div>
				<div class="modal-footer" style="text-align: center;">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary"
						onclick="submittochange()">确认</button>
				</div>
			</div>

		</div>
	</div>
	<!-- 这边是选择菜单的的模态框  end  -->

	<script type="text/javascript">
		$(function() {
			$("#searchButton").click(submitForm);

			function submitForm() {
				$("#positionForm").submit();
			}
		});
	</script>
	<script type="text/javascript">
		//根据id 查询职位详情
		function updateposition(id) {
			location.href = '${pageContext.request.contextPath}/EmmPositionServlet?method=getUpdatePostionDetailById&id='+id ;
		}

		//删除职位 根据id
		function deleteposition(id) {
			// ajax 后台发生请求参数
			let data = {};
			data.positionId = id ;
			$.ajax({
				type : 'post',
				url : 'EmmPositionServlet?method=deletePostionCheck',
				data : data,
				cache : false,
				sync : true,
				success : function(msg) {
					var json = JSON.parse(msg);
					if (!json.flag) {
						alert(json.msg);
					} else {
						//alert("删除职位："+id);
						location.href = '${pageContext.request.contextPath}/EmmPositionServlet?method=deletePosition&positionId='+id
					}

				},
				error : function() {
					alert("请求失败!");
				}
			});
		}
	</script>

	<script type="text/javascript">
		//显示关联菜单
		function showselectmodel(positionId) {
			//清空 选中的 菜单
			$("#myModal :checked").attr("checked",false) ;
			//显示 模态框
			$("#myModal").modal("show");
			// 关联的职位id  存放在 模态框的隐藏表单中
			$("#referencepositionId").val(positionId);
			//通过 ajax 向服务器端发送 异步请求 获得关联的 菜单id集合
			// ajax 后台发生请求参数
			let data = {};
			data.positionId = positionId ;
			$.ajax({
				type : 'post',
				url : 'EmmPositionServlet?method=getLinkPostionDetailById',
				data : data,
				cache : false,
				sync : true,
				success : function(msg) {
					var json = JSON.parse(msg);
					if (!json.flag) {
						alert(json.msg);
					} else {
						$.each(json.data,function (i,e) {
							//对应的菜单id 选中状态
							$("#checkedbox"+e).attr("checked",true) ;
						})
					}

				},
				error : function() {
					alert("请求失败!");
				}
			});
		}

		// 确认职位关联菜单 【向关系表 1.删除 2.批量插入 】
		function submittochange() {
			//获得关联职位的id
			let positionId = $("#referencepositionId").val();
			//获得选中菜单id
			let ay = new Array() ;
			//循环 模态框中 所有被选中的复选框
			$.each($("#myModal [name='checkedemployee']:checked"),function (i,e) {
				//获得被选中的 复选框的 value属性  添加到数组中
				ay.push($(e).val()) ;
			})
			let ids = ay.join(",") ;
			//console.log("职位id:"+positionId+",被选中的菜单id:"+ids) ;
			//同步：
			//location.href = 'xxxServlet?method=xx&positionId='+positionId+"&ids="+ids
			//向服务器端发送 异步请求
			// ajax 后台发生请求参数
			let data = {};
			data.positionId = positionId ;
			data.menuIds = ids ;
			$.ajax({
				type : 'post',
				url : 'EmmPositionServlet?method=positionLinks',
				data : data,
				cache : false,
				sync : true,
				success : function(msg) {
					var json = JSON.parse(msg);
					if (!json.flag) {
						alert(json.msg);
					} else {
						//关闭模态框
						$("#myModal").modal("hide");
					}

				},
				error : function() {
					alert("请求失败!");
				}
			});
		}
	</script>


	<script type="text/javascript">
		$.extend($.fn.dataTable.defaults, {
			"searching" : false,
			"ordering" : false
		});
		$('#example').DataTable({
			language : {
				"sProcessing" : "处理中...",
				"sLengthMenu" : "显示 _MENU_ 项结果",
				"sZeroRecords" : "没有匹配结果",
				"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
				"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
				"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
				"sInfoPostFix" : "",
				"sSearch" : "搜索:",
				"sUrl" : "",
				"sEmptyTable" : "表中数据为空",
				"sLoadingRecords" : "载入中...",
				"sInfoThousands" : ",",
				"oPaginate" : {
					"sFirst" : "首页",
					"sPrevious" : "上页",
					"sNext" : "下页",
					"sLast" : "末页"
				}
			}
		});
	</script>
</body>
</html>
